import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styles from './topics.css';

export default function() {
  const { loading, topics } = useSelector(state => state);
  const { list, page } = topics;

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: 'topics/getData', page });
  }, [page]);

  console.log(list);
  return (
    <div>
      <h2>主题列表 - 第{page}页</h2>
      {loading.models.topics ? (
        <h2>正在请求数据</h2>
      ) : (
        <ul className={styles.list}>
          {list.length > 0 ? list.map(item => <li key={item.id}>{item.title}</li>) : '暂无数据'}
        </ul>
      )}
      <button
        onClick={() => {
          dispatch({ type: 'topics/nextPage' });
        }}
      >
        下一页
      </button>
    </div>
  );
}
